<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>

</head>
</head>
<body>
<div id="app">

</div>
<!-- 1:引包 -->
<script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var myhead={
  template:"<div>我是头部</div>"
}

var mybody={
  template:"<div>我是中部</div>"
}
var myfoot={
  template:`<div>我是尾部
<button v-on:click="aa('点你妹啊')">点击我啊</button>
</div>
`,
  methods:{
    aa:function (word) {
      alert(word);
    }
  }
}
var App={
  components:{
    'my_head':myhead,
    'my_body':mybody,
    'my_foot':myfoot
  },
  template:`<div>
              <my_head/>
              <my_body/>
              <my_foot/>
            </div>`
};
new Vue({
  el:"#app",
  components:{
    'app':App
  },
  template:'<app/>'
})
</script>

</body>
</html>
